<!--
 * @author: sanbao
 * @Date: 2022-08-07 23:12:56
-->
<style lang='scss' scoped>
.confirmOrder {
  .top {
    background-color: rgb(237, 219, 219);
    border-bottom: 4px solid #ed712e;
    height: 44px;
    line-height: 44px;
  }
  .shwarp {
    display: flex;
    .list {
      width: 300px;
      height: 250px;
      border: 1px #ccc solid;
      margin-right: 20px;
      padding: 20px;
      box-sizing: border-box;
      p {
        margin: 20px 0;
      }
    }
    > :nth-child(1) {
      border: #ed712e 1px solid;
    }
    > :nth-child(3) {
      text-align: center;
      padding-top: 30px;
    }
  }
  .padding {
    padding: 30px;
    box-sizing: border-box;
  }
  .flex {
    display: flex;
    justify-content: space-between;
  }
  .xqwarp {
    padding: 20px;
    > p {
      border-bottom: 1px solid #000;
      padding: 10px 0;
      img {
        width: 30px;
        vertical-align: middle;
      }
      i {
        display: inline-block;
        margin-left: 50px;
        color: red;
      }
    }
    .awrp {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #000;
      i {
        float: right;
        display: inline-block;
        margin-left: 50px;
        color: red;
      }
    }
    .button {
      float: right;
      padding: 10px;
    }
  }
}
</style>

<template>
  <div class="confirmOrder">
    <div class="top">
      <div class="banxin_center">确认订单</div>
    </div>
    <div class="banxin_center padding">
      <h2>收货地址</h2>
      <div class="shwarp">
        <div class="list">
          <span>陈同学</span>
          <p>13580018623</p>
          <span>广东 广州市 白云区 江高镇 广东白云学院</span>
        </div>
        <div class="list">
          <span>陈同学</span>
          <p>13580018623</p>
          <span>广东 茂名市 化州市 杨梅镇 ***</span>
        </div>
        <div class="list">
          <el-icon><Aim /></el-icon>
          <p>添加收获地址</p>
        </div>
      </div>
      <div class="xqwarp">
        <p>商品及优惠券</p>
        <template v-for="(item, index) in $store.state.okshoplist">
          <p class="flex">
            <img :src="'http://101.132.181.9:3000/' + `${item.productImg}`" />
            <span>{{ item.productName }}</span>
            <span>{{ item.price }}美元X{{ item.num }}个</span>
            <span>{{ item.price * item.num }}美元</span>
          </p>
        </template>
        <p>配送方式<i>包邮</i></p>
        <p>发票<i>电子发票</i><i>个人</i><i>商品明细</i></p>
        <div class="awrp">
          <div class="left"></div>
          <div class="right">
            <p>商品件数：<i>5件</i></p>
            <p>商品总价：<i>12995元</i></p>
            <p>活动优惠：<i>-0元</i></p>
            <p>优惠券抵扣：<i>-0元</i></p>
            <p>运费：<i>0元</i></p>
            <p>应付总额：<i>12995元</i></p>
          </div>
        </div>
        <div class="button">
          <el-button @click="$router.back()">返回购物车</el-button>
          <el-button type="primary" @click="okshop">结算</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
import { Aim } from "@element-plus/icons-vue";
import { useStore } from "vuex";
import ShopModel from "@/api/shop";
import { ElNotification } from "element-plus";
import { useRouter } from "vue-router";
export default {
  components: { Aim },
  setup() {
    const store = useStore();
    const router = useRouter();
    const okshop = async () => {
      let list = computed(() => store.state.okshoplist);
      let dataa = {
        products: list.value,
        user_id: 9557,
      };
      const respnse = await ShopModel.addOrder(dataa);
      if (respnse.data.code == "001") {
        ElNotification.success(respnse.data.msg);
        router.push("/order");
      }
    };
    return {
      okshop,
    };
  },
};
</script>
